<template>
    <el-dropdown @command="handleCommand">
        <el-button type="primary">
            {{currentType}}<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command=1>故事读物</el-dropdown-item>
            <el-dropdown-item command=2>营养膳食</el-dropdown-item>
            <el-dropdown-item command=3>心理教育</el-dropdown-item>
            <el-dropdown-item command=4>疾病预防</el-dropdown-item>
            <el-dropdown-item command=5>家有萌娃</el-dropdown-item>
            <el-dropdown-item command=6>前沿教育</el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>
</template>

<script>
    export default {
        name: "typeSelector",
        data() {
            return {
                currentType: '故事读物',
                typeEnum : ['故事读物', '营养膳食', '心理教育', '疾病预防', '家有萌娃', '前沿教育']
            }
        },
        methods: {
            handleCommand(command) {
                this.$message('click on item ' + command)
                this.currentType = this.typeEnum[--command]
            }
        }
    }
</script>

<style scoped>

</style>
